<script setup>
	import {
		baseUrl
	} from '@/common/api/config.js'
	import {
		computed,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		createOrderAPI,
		getUserOrderByIdAPI
	} from '@/services/order';
	import {
		useAddressStore,
		useUserStore
	} from '@/stores/index.js';
	//用餐人数
	const buyerNum = ref(1)
	// 订单备注
	const buyerMessage = ref('')
	//已选中的购物车中的商品
	const cartList = ref([])
	//当前用户信息
	const currentUser = ref([])
	//商品数量
	const itemsCount = ref(0)
	//商品总价格
	const totalPrice = ref(0)
	// 配送方式
	const deliveryList = ref([{
			text: '外带'
		},
		{
			text: '堂食'
		}
	])
	const addressStore = useAddressStore()
	const userStore = useUserStore()
	// 收货地址
	const selectedAddress = computed(() => {
		return addressStore.selectedAddress
	})
	// 当前配送时间下标
	const activeIndex = ref(0)


	onLoad(async (options) => {
		// console.log(9999999999,options)
		// if (options.orderId) {
		// 	const res = await getUserOrderByIdAPI({
		// 		orderId: options.orderId
		// 	})
		// 	// console.log(9999999999,options,res)
		// 	cartList.value = res.data.data.goods
		// 	itemsCount.value = res.data.data.orderItemNum
		// 	totalPrice.value =  res.data.data.orderTotalPrice
		// 	currentUser.value = userStore.profile
		// } else {
		currentUser.value = JSON.parse(decodeURIComponent(options.user))
		cartList.value = JSON.parse(decodeURIComponent(options.cartItems))
		itemsCount.value = Number(JSON.parse(decodeURIComponent(options.itemsCount)))
		totalPrice.value = Number(JSON.parse(decodeURIComponent(options.totalPrice)))

		// }

	})

	const orderCheck = async () => {
		const res = await createOrderAPI({
			//用户uid
			u_id: currentUser.value.u_id,
			//订单中的商品列表
			dishList: cartList.value,
			//订单总价
			orderTotalPrice: totalPrice.value,
			//订单商品总数
			orderItemNum: itemsCount.value,
			//就餐人数
			o_people_num: buyerNum.value,
			//是否外带
			o_is_take_out: activeDelivery.value.text,
			//订单备注
			o_remark: buyerMessage.value,
			//订单配送地址信息
			addressField: {a_id:selectedAddress.value.a_id}

		})
		// console.log(9999999999,res)
		if (res.data.code == 200) {
			// console.log(99999999, res.data)
			uni.navigateTo({
				url: '/subpkg/order/orderPay/orderPay?orderId=' + res.data.data.o_id
			})
		}


	}

	// 当前配送方式
	const activeDelivery = computed(() => deliveryList.value[activeIndex.value])
	// 修改配送方式
	const onChangeDelivery = (ev) => {
		activeIndex.value = ev.detail.value
	}
</script>

<template>
	<scroll-view scroll-y class="viewport">
		<!-- 收货地址 -->
		<navigator v-if="selectedAddress" class="shipment" hover-class="none"
			url="/subpkg/myinfo/shipping_address/shipping_address?from=order">
			<view class="user">{{selectedAddress.receiver}} {{selectedAddress.contact}}</view>
			<view class="address">{{selectedAddress.o_address}}</view>
			<text class="icon icon-right"></text>
		</navigator>
		<navigator v-else class="shipment" hover-class="none"
			url="/subpkg/myinfo/shipping_address/shipping_address?from=order">
			<view class="address"> 请选择收货地址 </view>
			<text class="icon icon-right"></text>
		</navigator>

		<!-- 商品信息 -->
		<view class="goods">
			<view v-for="item in cartList" :key="item.cd_id" class="item" hover-class="none">
				<image class="picture" :src="baseUrl+item.cd_url" />
				<view class="meta">
					<view class="name ellipsis">{{item.cd_name}}</view>
					<!-- 					<view class="attrs">数量:{{item.num}}</view> -->
					<view class="prices">
						<view class="pay-price symbol">{{item.cd_price}}</view>
					</view>
					<view class="count">x{{item.num}}</view>
				</view>
			</view>
		</view>

		<!-- 配送及支付方式 -->
		<view class="related">
			<view class="item">
				<text class="text">配送方式</text>
				<picker :range="deliveryList" range-key="text" @change="onChangeDelivery">
					<view class="icon-fonts picker">{{activeDelivery.text}}</view>
				</picker>
			</view>
			<view class="item">
				<text class="text">用餐人数</text>
				<input class="input" :cursor-spacing="30" placeholder="请输入用餐人数" v-model="buyerNum" />
			</view>

			<view class="item">
				<text class="text">订单备注</text>
				<input class="input" :cursor-spacing="30" placeholder="选题，建议留言前先与商家沟通确认" v-model="buyerMessage" />
			</view>
		</view>

		<!-- 支付金额 -->
		<view class="settlement">
			<view class="item">
				<text class="text">商品数量: </text>
				<text class="number">{{itemsCount}}</text>
			</view>
			<view class="item">
				<text class="text">商品总价: </text>
				<text class="number symbol">{{totalPrice}}</text>
			</view>

		</view>
	</scroll-view>

	<!-- 吸底工具栏 -->
	<view class="toolbar">
		<view class="total-pay symbol">
			<text class="number">{{totalPrice}}</text>
		</view>
		<view class="button" @click="orderCheck"> 提交订单 </view>
	</view>
</template>
<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
		background-color: #f4f4f4;
	}
</style>
<style lang="scss" scoped>
	.viewport {
		height: 90%;

	}

	.symbol::before {
		content: '¥';
		font-size: 80%;
		margin-right: 5rpx;
	}

	.shipment {
		margin: 20rpx;
		padding: 30rpx 30rpx 30rpx 84rpx;
		font-size: 26rpx;
		border-radius: 10rpx;
		background: url(http://test.zshawk.top/static/img/order/locate.png) 20rpx center / 50rpx no-repeat #fff;
		position: relative;

		.icon {
			font-size: 36rpx;
			color: #333;
			transform: translateY(-50%);
			position: absolute;
			top: 50%;
			right: 20rpx;
		}

		.user {
			color: #333;
			margin-bottom: 5rpx;
		}

		.address {
			color: #666;
			word-break: break-all;
		}
	}

	.goods {
		margin: 20rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.item {
			display: flex;
			padding: 30rpx 0;
			border-top: 1rpx solid #eee;

			&:first-child {
				border-top: none;
			}

			.picture {
				width: 170rpx;
				height: 170rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.meta {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: relative;
			}

			.name {
				height: 80rpx;
				font-size: 26rpx;
				color: #444;
			}

			.attrs {
				line-height: 1.8;
				padding: 0 15rpx;
				margin-top: 6rpx;
				font-size: 24rpx;
				align-self: flex-start;
				border-radius: 4rpx;
				color: #888;
				background-color: #f7f7f8;
			}

			.prices {
				display: flex;
				align-items: baseline;
				margin-top: 6rpx;
				font-size: 28rpx;

				.pay-price {
					margin-right: 10rpx;
					color: #cf4444;
				}

				.price {
					font-size: 24rpx;
					color: #999;
					text-decoration: line-through;
				}
			}

			.count {
				position: absolute;
				bottom: 0;
				right: 0;
				font-size: 26rpx;
				color: #444;
			}
		}
	}

	.related {
		margin: 20rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			min-height: 80rpx;
			font-size: 26rpx;
			color: #333;
		}

		.input {
			flex: 1;
			text-align: right;
			margin: 20rpx 0;
			padding-right: 20rpx;
			font-size: 26rpx;
			color: #999;
		}

		.item .text {
			width: 125rpx;
		}

		.picker {
			color: #666;
		}

		// .picker::after {
		// 	content: '\e6c2';
		// }
	}

	/* 结算清单 */
	.settlement {
		margin: 20rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			font-size: 26rpx;
			color: #333;
		}

		.danger {
			color: #cf4444;
		}
	}

	/* 吸底工具栏 */
	.toolbar {

		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(var(--window-bottom));
		z-index: 1;

		background-color: #fff;
		height: 100rpx;
		padding: 0 20rpx;
		border-top: 1rpx solid #eaeaea;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: content-box;

		.total-pay {
			font-size: 40rpx;
			color: #cf4444;

			.decimal {
				font-size: 75%;
			}
		}

		.button {
			width: 220rpx;
			text-align: center;
			line-height: 72rpx;
			font-size: 26rpx;
			color: #fff;
			border-radius: 72rpx;
			background-color: red;
		}

		.disabled {
			opacity: 0.6;
		}
	}
</style>